<template>
  <dt-dialog title="详情" :visible.sync="dialogVisible" :is-loading="loading"
             :footer-slot="true">
    <div slot="content">
      <el-form ref="detailForm" :model="detailForm" :rules="rules"
               label-width="80px" disabled>
        <el-form-item label="消息标题" prop="messageTitle">
          <el-input v-model.trim="detailForm.messageTitle" placeholder="请输入消息标题" type="textarea"
                    maxlength="80" show-word-limit class="limit" />
        </el-form-item>
        <el-form-item label="消息内容" prop="messageContent">
          <el-input v-model.trim="detailForm.messageContent" type="textarea" placeholder="请输入消息内容"
                    maxlength="600" show-word-limit class="limit" />
        </el-form-item>
        <el-row :gutter="20">
          <el-col :xs="24" :span="12">
            <el-form-item label="发送渠道" prop="channelSdkName">
              <el-input v-model.trim="detailForm.channelSdkName" placeholder="请输入发送渠道" class="limit" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :span="12">
            <el-form-item label="发送状态" prop="sendStatus">
              <el-select v-model.trim="detailForm.sendStatus" placeholder="请选择发送状态" style="width:100%">
                <el-option
                  v-for="dict in dict.type.sendStatus"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :span="12">
            <el-form-item label="发送方" prop="sender">
              <el-input v-model.trim="detailForm.sender" placeholder="请输入发送方" class="limit" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :span="12">
            <el-form-item label="接收方" prop="receiver">
              <el-input v-model.trim="detailForm.receiver" placeholder="请输入接收方" class="limit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :span="12">
            <el-form-item label="消息类型" prop="messageType">
              <el-input v-model.trim="detailForm.messageType" placeholder="请输入消息类型" class="limit" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :span="12">
            <el-form-item label="优先级" prop="priorityLevel">
              <el-select v-model="detailForm.priorityLevel" placeholder="请选择优先级">
                <el-option
                  v-for="dict in dict.type.classifyLevel"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :span="12">
            <el-form-item label="发送时间" prop="scheduledSendTime">
              <el-input v-model.trim="detailForm.scheduledSendTime" placeholder="请输入发送时间" class="limit" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </dt-dialog>
</template>
<script>
import { noticeDetail } from '@/framework/api/notice'

export default {
  dicts: ['sendStatus', 'classifyLevel'],
  data() {
    return {
      dialogVisible: false,
      loading: true,
      detailForm: {
        messageTitle: '',
        messageContent: '',
        channelSdkName: '',
        sendStatus: '',
        sender: '',
        receiver: '',
        messageType: '',
        priorityLevel: '',
        scheduledSendTime: '',
        messageLogList: []
      },
      rules: {}
    }
  },
  methods: {
    detail(row) {
      this.dialogVisible = true
      this.reset()
      const { messageId } = row
      noticeDetail(messageId).then((res) => {
        this.detailForm = res.data
        this.detailForm.priorityLevel = row.priorityLevel
        this.detailForm.scheduledSendTime = row.scheduledSendTime
      })
    },
    reset() {
      this.detailForm = {
        messageTitle: '',
        messageContent: '',
        channelSdkName: '',
        sendStatus: '',
        sender: '',
        receiver: '',
        messageType: '',
        priorityLevel: '',
        scheduledSendTime: '',
        messageLogList: []
      }
      this.resetForm('detailForm')
    }
  }
}
</script>
